<template>
  <div class="createrOrder-box">
    <div class="createrOrder-main">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        :size="formSize"
        class="demo-ruleForm"
        label-width="auto"
        scroll-to-error
        status-icon
        style="width: 100%"
      >
        <div class="item-list">
          <el-form-item class="code" label="单号：" required>
            <span>后台生成</span>
          </el-form-item>
          <el-form-item label="终端门店" prop="clientStores" required>
            <el-input v-model="ruleForm.clientStores" clearable />
          </el-form-item>
          <el-form-item label="客户名称" prop="clientName">
            <el-select
              v-model="ruleForm.clientName"
              filterable
              placeholder="请输入客户名称"
              @change="customerChange"
            >
              <el-option
                v-for="item in customerList"
                :key="item.value"
                :label="item.label"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="联系人" prop="contact">
            <el-input v-model="ruleForm.contact" clearable />
          </el-form-item>
          <el-form-item label="业务员" prop="salesman" required @click="openSelectUser">
            <el-input v-model="ruleForm.salesmanName" disabled placeholder="请选择业务员" />
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-tree-select
              v-model="ruleForm.department"
              :data="deptOptions"
              :props="{ value: 'id', label: 'label', children: 'children' }"
              check-strictly
              placeholder="请选择归属部门"
              value-key="id"
            />
          </el-form-item>
        </div>

        <div class="item-list1">
          <!-- <el-form-item label="下单日期" required prop="startTime" class="startTime">
              <el-date-picker v-model="ruleForm.startTime" type="date" label="下单日期" format="YYYY-MM-DD" clearable
                  value-format="YYYY-MM-DD" />
          </el-form-item> -->
          <el-form-item label="关联核算单编号" prop="costingId">
            <el-input v-model="ruleForm.costingId" clearable disabled />
          </el-form-item>
          <el-form-item label="交货日期" prop="endTime" required>
            <el-date-picker
              v-model="ruleForm.endTime"
              clearable
              format="YYYY-MM-DD"
              label="交货日期"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="票据类型" prop="bill">
            <el-select v-model="ruleForm.bill" clearable>
              <el-option label="增值税发票" value="增值税发票" />
              <el-option label="普通发票" value="普通发票" />
            </el-select>
          </el-form-item>
          <el-form-item label="后期服务" prop="server" required>
            <el-select v-model="ruleForm.server" clearable>
              <el-option label="上门安装" value="上门安装" />
              <el-option label="送货上门" value="送货上门" />
              <el-option label="自取" value="自取" />
            </el-select>
          </el-form-item>

          <el-form-item label="客户累计应收款" prop="crediting">
            <el-input v-model="ruleForm.crediting" clearable />
          </el-form-item>

          <el-form-item label="安装队" prop="designerName">
            <el-select
              v-model="ruleForm.designerName"
              filterable
              placeholder="请选择安装队"
              @change="teamsChange"
            >
              <el-option
                v-for="item in teamsList"
                :key="item.value"
                :label="item.label"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 表格 -->
        <TableCom
          :boder="true"
          :dataTable="dataTable"
          @createTable="createTable"
          @deleteRow="deleteRow"
        />
        <div class="item-list2">
          <el-form-item class="costCategory-box" label="预算成本：">
            <div class="list">
              <p>预算材料费</p>
              <el-input v-model="totalMaterial" disabled type="Number" />
            </div>
            <div class="list">
              <p>预算安装费</p>
              <el-input v-model="totalInstall" type="Number" />
            </div>
            <div class="list">
              <p>预算城管费</p>
              <el-input v-model="urbanManagementFee" type="Number" />
            </div>
          </el-form-item>
          <el-form-item class="costCategory-box" label="实际成本：">
            <div class="list">
              <p>实际材料费</p>
              <el-input v-model="actualTotalMaterial" disabled type="Number" />
            </div>
            <div class="list">
              <p>实际安装费</p>
              <el-input v-model="actualTotalInstall" disabled type="Number" />
            </div>
            <div class="list">
              <p>实际城管费</p>
              <el-input v-model="actualUrbanManagementFee" disabled type="Number" />
            </div>
          </el-form-item>
          <!-- <el-form-item label="优惠金额:" prop="discount">
                  <el-input v-model="discount" type="Number"/>
          </el-form-item> -->
          <el-form-item label="订单总金额:" prop="totalMoney">
            <el-input v-model="ruleForm.totalMoney" disabled type="Number" />
          </el-form-item>
          <el-form-item label="结款状态:" prop="paymentStatus">
            <el-input v-model="ruleForm.paymentStatus" disabled />
          </el-form-item>
          <el-form-item label="客户类型：" prop="clienttype" required>
            <el-select v-model="ruleForm.clienttype">
              <el-option label="标准流程" value="标准流程" />
              <el-option label="外协流程" value="外协流程" />
              <el-option label="散客" value="散客" />
            </el-select>
          </el-form-item>

          <el-form-item label="备注：" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <el-form-item label="制单人：" prop="made" required>
            <el-input v-model="ruleForm.made" />
          </el-form-item>
          <el-form-item label="审批人：" prop="approval">
            <el-input v-model="ruleForm.approval" disabled />
          </el-form-item>
        </div>
        <div class="tableUtils">
          <el-button @click="closeSelectedTag(viewInfo)">关闭</el-button>
          <el-button class="create" @click="submitForm(ruleFormRef)"> 提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" :before-close="handleClose" title="提示" width="500">
    <span>检测工单信息数据，是否自动填写?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">不导入，重新填写</el-button>
        <el-button type="primary" @click="importOldData"> 导入信息</el-button>
        <el-button type="danger" @click="deleteOldData"> 删除信息</el-button>
      </div>
    </template>
  </el-dialog>
  <selectUser ref="selectRef" @userOneInfo="userOneInfo" />
</template>
<script setup>
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import TableCom from '@/components/table/common'
import { inputSearchHandler } from '@/hook/inputChange'
import { deptTreeSelect } from '@/api/system/user'
import selectUser from '@/components/allUserInfo/index'

import { getEmployeeApi, getWorkApi, getworkInsertApi } from '@/api/tickets/index'
import { moveToViewHandler } from '@/hook/moveToView/moveToView'
import { getApiDataRules } from '@/hook/getApiDataRules'
import { useRoute, useRouter } from 'vue-router'
import { listTeams } from '@/api/teams'
import { ElMessage } from 'element-plus'

let { apiRulesData } = getApiDataRules()
let route = useRoute()
const router = useRouter()
const deptOptions = ref(undefined)
const selectRef = ref(null)
let tableQueryData = reactive(null)

let dialogVisible = ref(false)
// 关闭当前页面 参数
let viewInfo = {
  fullPath: '/tickets/newOrders',
  hash: '',
  matched: [{}, {}],
  meta: { title: '新增订单', icon: 'radio', noCache: false, link: null },
  name: 'NewOrders',
  params: {},
  path: '/tickets/newOrders',
  query: {},
  redirectedFrom: undefined,
  title: '新增订单',
}
// 关闭当前页面
let { closeSelectedTag } = moveToViewHandler()
// 显示搜索到的值
let { SearchHandler } = inputSearchHandler()
// 预算总材料费
let totalMaterial = ref(0)
// 预算总安装费
let totalInstall = ref(0)
// 预算总城管费
let urbanManagementFee = ref(0)

// 实际总材料费
let actualTotalMaterial = ref(0)
// 实际总安装费
let actualTotalInstall = ref(0)
// 实际总城管费
let actualUrbanManagementFee = ref(0)

// 优惠金额
let discount = ref(0)
const formSize = ref('default')
const ruleFormRef = ref()
// 表单数据
const ruleForm = reactive({
  clientStores: '', // 门店
  clientName: '', // 客户名称
  customerId: '', // 客户名称
  contact: '', // 联系人
  salesman: '', // 业务员
  salesmanName: '',
  department: '', // 部门
  // startTime: '',      // 下单日期
  costingId: '', // 关联id
  endTime: '', // 交货日期
  bill: '', // 票据类型
  server: '', // 后期服务
  crediting: 0, // 客户累计应收款

  totalMoney: 0, // 订单总金额
  paymentStatus: '', // 结款状态
  clienttype: '', // 客户类型
  desc: '', // 备注
  made: '', // 制单人
  approver: '', // 审批人
  designerName: '', // 安装工人
  designerId: '', // 安装工人
})
// 表格数据
let dataTable = ref([
  {
    businessType: '', // 业务类型
    productId: '', // 存货名称
    productionContent: '', // 制作内容
    width: '', // 宽
    height: '', // 高
    id: '',
    quantityPerPiece: 1, // 件数
    totalQuantity: 1, // 数量
    unit: '0', // 单位
    salePrice: 0, //  销售单价
    amount: 0, // 金额
    price: 0, // 成本单价
    salePriceAll: 0, //  成本金额
    prepayment: 0, // 预收款
    materialFee: 0, // 材料费
    externalVendorId: '', //外协商
    costCategory: '', // 成本类型
    budgetCost: 0, // 预算成本
    actualCost: 0, // 实际成本
  },
  // {
  //     businessType: '',                // 业务类型
  //     productId: '',                   // 存货名称
  //     productionContent: '',           // 制作内容
  //     width: '',                      // 宽
  //     height: '',                     // 高
  //     id: "",
  //     quantityPerPiece: 1,          // 件数
  //     totalQuantity: 1,          // 数量
  //     unit: '0',           // 单位
  //     salePrice: 0,      //  销售单价
  //     amount: 0,          // 金额
  //     price: 0,      // 成本单价
  //     salePriceAll: 0,      //  成本金额
  //     prepayment: 0,        // 预收款
  //     materialFee: 0,          // 材料费
  //     externalVendorId: '',     //外协商
  //     costCategory: '',         // 成本类型
  //     budgetCost: 0,           // 预算成本
  //     actualCost: 0,           // 实际成本
  // },
  // {
  //     businessType: '',                // 业务类型
  //     productId: '',                   // 存货名称
  //     productionContent: '',           // 制作内容
  //     width: '',                      // 宽
  //     height: '',                     // 高
  //     id: "",
  //     quantityPerPiece: 1,          // 件数
  //     totalQuantity: 1,          // 数量
  //     unit: '0',           // 单位
  //     salePrice: 0,      //  销售单价
  //     amount: 0,          // 金额
  //     price: 0,      // 成本单价
  //     salePriceAll: 0,      //  成本金额
  //     prepayment: 0,        // 预收款
  //     materialFee: 0,          // 材料费
  //     externalVendorId: '',     //外协商
  //     costCategory: '',         // 成本类型
  //     budgetCost: 0,           // 预算成本
  //     actualCost: 0,           // 实际成本
  // },
])

/**
 * 乘法函数，用来得到精确的乘法结果
 * 说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
 * 调用：accMul(arg1,arg2)
 * 返回值：arg1乘以 arg2的精确结果
 **/
const accMul = (arg1, arg2) => {
  if (isNaN(arg1)) {
    arg1 = 0
  }
  if (isNaN(arg2)) {
    arg2 = 0
  }
  arg1 = Number(arg1)
  arg2 = Number(arg2)

  var m = 0,
    s1 = arg1.toString(),
    s2 = arg2.toString()
  try {
    m += s1.split('.')[1].length
  } catch (e) {}
  try {
    m += s2.split('.')[1].length
  } catch (e) {}
  return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
}

// 客户名称
let customerList = reactive([])
// 安装工人
let teamsList = reactive([])

// 业务员
let Employee = ref([])

// 设计师下拉数据
let designermenu = ref([])

// 获取人员信息
const userOneInfo = (v) => {
  ruleForm.salesman = String(v.userIds)
  ruleForm.salesmanName = v.nickName
}
// 自定义校验
const rules = reactive({
  clientStores: [{ required: true, message: '请填写终端门店', trigger: 'blur' }],

  server: [{ required: true, message: '请选择后期服务', trigger: 'change' }],
  salesman: [{ required: true, message: '请选择业务员', trigger: 'change' }],
  clientName: [
    {
      required: true,
      message: '请选择填写选择客户名称',
      trigger: 'change',
    },
  ],
  department: [
    {
      required: true,
      message: '请填写部门',
      trigger: 'change',
    },
  ],

  endTime: [
    {
      type: 'date',
      required: true,
      message: '请选择交货日期',
      trigger: 'change',
    },
  ],
  clienttype: [
    {
      required: true,
      message: '请填写客户类型',
      trigger: 'change',
    },
  ],

  made: [
    {
      required: true,
      message: '请填写制单人',
      trigger: 'change',
    },
  ],
})
// 创建一行表格
const createTable = (data) => {
  dataTable.value.push(data)
}
// 删除一行表格
const deleteRow = (v) => {
  dataTable.value.splice(v.$index, 1)
}

// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
  let params = { customerName: v }
  let { code, data } = await getWorkApi(params)
  if (code == 200) {
    data.forEach((v) => {
      customerList.push({
        label: v.primaryClassification + '/' + v.customerName,
        value: v.customerId,
      })
    })
  }
}
const customerChange = (e) => {
  ruleForm.customerId = e.value
  ruleForm.clientName = e.label
}
const teamsChange = (e) => {
  ruleForm.designerId = e.value
  ruleForm.designerName = e.label
}

// 获取业务员下拉菜单数据
const getEmployeeApiData = async (data = '') => {
  let params = { employeeName: data }
  let res = await getEmployeeApi(params)
  Employee.value = apiRulesData(res)
}

/** 打开授权用户表弹窗 */
const openSelectUser = () => {
  selectRef.value.show()
}

// 计算材料安装城管费
const stopWatch = watch(
  () => [dataTable.value, discount],
  ([val, val1]) => {
    // 材料费
    let materials = 0
    // 总金额
    let moneyAll = 0

    let salePriceAllCopy = 0
    val.forEach((v) => {
      // 面积
      if (v.unit == '平方米' || v.unit == '平方') {
        v.totalQuantity = parseFloat(
          Number(v.width * v.height * Number(v.quantityPerPiece)).toFixed(8),
        )
      }
      if (
        v.unit == '个' ||
        v.unit == '套' ||
        v.unit == '张' ||
        v.unit == '份' ||
        v.unit == '项' ||
        v.unit == '包'
      ) {
        if (!Number.isInteger(Number(v.totalQuantity))) {
          v.classErrorBorder = true
        }
      } else {
        v.classErrorBorder = false
      }

      // 销售金额
      v.amount = Number(Number(v.totalQuantity * v.salePrice).toFixed(2))
      // 成本金额
      v.salePriceAll = Number(Number(v.totalQuantity * v.price).toFixed(2))
      salePriceAllCopy += v.salePriceAll

      // 预算成本
      v.budgetCost = Number((Number(v.materialFee) + Number(v.salePriceAll)).toFixed(2))
      materials += Number(Number(v.materialFee).toFixed(2))
      moneyAll += Number(Number(v.amount).toFixed(2))
    })
    // 材料费
    totalMaterial.value = Number((Number(materials) + salePriceAllCopy).toFixed(2))
    // 总金额
    ruleForm.totalMoney = Number((Number(moneyAll) - val1.value).toFixed(2))
  },
  {
    deep: true,
    immediate: true,
  },
)

/*查询部门下拉树结构 */
const getDeptTree = () => {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data
  })
}
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 表格
      let tableOrders = dataTable.value.map((v) => {
        //     // unit 没定
        return {
          businessType: v.businessType, //  业务类型
          productId: v.productId, //  商品ID  存货
          productionContent: v.productionContent, //  制作内容
          width: v.width, //  宽
          height: v.height, //  高
          quantityPerPiece: v.quantityPerPiece, //  件数
          totalQuantity: v.totalQuantity, //  数量
          amount: v.amount, //  总金额
          salePrice: v.salePrice, //  销售单价
          price: v.price, // 成本单价
          salePriceAll: v.salePriceAll, //  成本金额
          prepayment: v.prepayment, //  预收款
          outsourcingId: v.externalVendorId, //    外协商ID
          costCategory: v.costCategory, //  成本类别
          budgetCost: v.budgetCost, //  预算成本
          actualCost: v.actualCost, //  实际成本
          materialFee: v.materialFee, //   材料费
          installationFee2: v.installationFee2, //  安装费
          installationFee: v.installationFee, //  安装费
          urbanManagementFee: v.urbanManagementFee, //  城管费
          id: v.id,
        }
      })

      // 表单
      let params = [
        {
          orderId: null,
          customerStore: ruleForm.clientStores, //终端门店
          customerId: ruleForm.customerId, // 客户ID
          customerName: ruleForm.clientName, // 客户ID
          contactPerson: ruleForm.contact, // 联系人
          employeeId: ruleForm.salesman, // 员工ID
          // orderDate: ruleForm.startTime,  // 下单日期
          costingId: ruleForm.costingId, // 关联核算单编号
          deliveryDate: ruleForm.endTime, // 交货日期
          invoiceType: ruleForm.bill, // 票据类型
          afterSalesService: ruleForm.server, //后期服务
          deptId: ruleForm.department, // 部门ID
          customerCumulativeAmount: ruleForm.crediting, // 客户累计应收款

          totalOrderAmount: ruleForm.totalMoney, // 订单总金额
          customerType: ruleForm.clienttype, // 客户类型
          creator: ruleForm.made, // 制单人
          approver: ruleForm.approval, // 审批人
          remarks: ruleForm.desc, // 备注
          paymentStatus: ruleForm.paymentStatus, // 结款状态
          materialFeeTotal: totalMaterial.value, // 预算材料费
          measurementId: ruleForm.measurementId, // 测量单ID
          installationFeeTotal: totalInstall.value, //  预算总安装费
          urbanManagementFee: urbanManagementFee.value, // 预算总城管费

          designerId: ruleForm.designerId, // 安装队
          designerName: ruleForm.designerName,
          actualTotalMaterial: actualTotalMaterial.value, // 实际材料费
          actualTotalInstall: actualTotalInstall.value, //  实际总安装费
          actualUrbanManagementFee: actualUrbanManagementFee.value, // 实际总城管费
          productionVOS: tableOrders, // 表格
          discount: discount.value,
        },
      ]
      if (!tableQueryData) {
        delete params[0].costingId
      }
      // 更改参数格式
      let obj = {}
      params.forEach((item, index) => {
        obj[index] = item
      })
      // 判断表格第一个是否输入没有就不让执行下一步
      if (!obj['0'].productionVOS[0].businessType) {
        return ElMessage({
          showClose: true,
          message: '请输入订单表格数据',
          type: 'error',
          duration: 1000,
        })
      }
      getworkInsertApi(obj['0']).then((res) => {
        let { code, msg, data } = res
        if (code === 200) {
          // 清空数据
          if (!ruleFormRef.value) return
          ruleFormRef.value.resetFields()
          for (const key in dataTable.value[0]) {
            dataTable.value[0][key] = ''
          }
          totalMaterial.value = 0
          totalInstall.value = 0
          urbanManagementFee.value = 0
          ElMessage({
            showClose: true,
            message: msg,
            type: 'success',
            duration: 1000,
          })

          localStorage.setItem('leimu', '')
          // 关闭当前页面
          // closeSelectedTag(viewInfo)
          router.push({
            path: '/tickets/newOrdersResult',
            query: {
              orderId: data.orderId,
            },
          })
        } else {
          ElMessage({
            showClose: true,
            message: msg,
            type: 'error',
            duration: 1000,
          })
        }
      })
    } else {
      console.log('提交失败', fields)
    }
  })
}

// 查询数据
const listTeamsFn = async () => {
  let params = {
    pageSize: 10000,
    pageNum: 1,
  }
  let res = await listTeams(params)
  let { code, rows, total } = res
  if (code == 200) {
    rows.forEach((v) => {
      teamsList.push({
        label: v.constructionTeamName,
        value: v.constructionTeamId,
      })
    })
  }
}

onUnmounted(() => {
  stopWatch()
})

const importOldData = () => {
  let propsMy = tableQueryData
  // 总材料费
  totalMaterial.value = propsMy.moneyMaterials
  // 总安装费
  totalInstall.value = propsMy.moneyInstall
  // 总城管费
  urbanManagementFee.value = propsMy.moneyCity
  //  总金额
  ruleForm.totalMoney = propsMy.moneyAll
  ruleForm.costingId = propsMy.costingId
  ruleForm.clientName = propsMy.customerName
  ruleForm.customerId = propsMy.measurement.customerId
  ruleForm.contact = propsMy.measurement.manufacturerContact
  ruleForm.clientStores = propsMy.measurement.terminalName
  // ruleForm.made = propsMy.creator
  ruleForm.salesmanName = propsMy.businessSurveyorName
  ruleForm.salesman = propsMy.measurement.businessSurveyor
  ruleForm.measurementId = propsMy.measurementId
  ruleForm.desc = propsMy.remark

  // 表格数据
  dataTable.value = propsMy.productionVOS
  dataTable.value.forEach((v) => {
    v.externalVendorId = v.outsourcingId
  })
  dialogVisible.value = false
}

const deleteOldData = () => {
  localStorage.setItem('leimu', '')
  dialogVisible.value = false
}
onMounted(() => {
  tableQueryData = localStorage.getItem('leimu') ? JSON.parse(localStorage.getItem('leimu')) : false
  if (tableQueryData) {
    dialogVisible.value = true
  }
  getWorkApiData()
  getEmployeeApiData()
  getDeptTree()
  listTeamsFn()
  // encodeURIComponent
})
</script>

<style lang="scss">
@import '@/assets/styles/variables.module.scss';

.dropdownSelect {
  width: 126px;

  .scrollClassOrder {
    max-height: 120px;
    overflow-y: scroll;
  }

  .el-select-dropdown {
    min-width: 124px !important;
    width: 124px;

    .el-scrollbar {
      .el-scrollbar__view {
        .el-input {
          width: 100%;
          height: 20px;
          padding: 0 10px;
          font-size: 12px;
        }

        .el-select-dropdown__item {
          width: 100%;
          font-size: 12px;
        }
      }
    }
  }
}

// .startTime {
//     input {
//         width: 72px;
//     }
// }

.dropdownSelect {
  width: 300px !important;
}

.createrOrder-main {
  padding-top: 0 !important;
}

.el-select-dropdown__wrap {
  width: 100%;
}

.el-scrollbar {
  min-width: 100%;
}

.createrOrder-box {
  padding-top: 20px;

  .el-select-dropdown {
    min-width: 100%;
  }

  .el-scrollbar {
    .el-input {
      width: 100%;
    }
  }

  .el-form {
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC;

    .item-list,
    .item-list1 {
      display: flex;
      flex-wrap: wrap;

      .code {
        width: 162px !important;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 0px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .el-form-item {
        width: 258px;

        .el-form-item__label-wrap {
          margin-left: 20px !important;
        }
      }
    }

    .el-input {
      width: 158px;
    }

    .item-list2 {
      margin-top: 20px;

      .el-form-item {
        width: 400px;

        .el-form-item__label-wrap {
          margin-left: 20px !important;
          width: 80px;

          .el-input__inner {
            width: 128px;
          }
        }
      }

      .costCategory-box {
        display: flex;
        align-items: center;
        width: 100% !important;

        .list {
          display: flex;
          align-items: center;

          P {
            margin-right: 15px;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            line-height: 0px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .tableUtils {
    padding-right: 80px;
    margin-top: 103px;
    width: 100%;
    text-align: right;

    .create {
      background-color: $base-btn-color;
      color: azure;
    }
  }
}
</style>
